<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <script src="./lib/vue-2.4.0.js"></script>
        <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
    </head>
    <body>
        <div id="app">

            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">添加品牌</h3>
                </div>
                <div class="panel-body form-inline">
                    <label for="">
                        Id:
                        <input type="text" class="form-control" v-model="id">
                    </label>

                    <label for="">
                        Name:
                        <input type="text" class="form-control" v-model ="name">
                    </label>

                    <!-- 在Vue中使用事件绑定机制,为元素指定处理函数的时候,如果加了小括号,就可以给函数传参了 -->
                    <input type="button" value="添加" class="btn btn-primary" @click="add()">

                    <label for="">
                        搜索名称关键字:
                        <input type="text" class="form-control" v-model = "keywords">
                    </label>
                </div>
            </div>


            <!-- //下方显示表格部分0 -->
            <table class="table table-bordered table-hover table-striped">
                <thead>
                    <tr>
                        <th>Id</th>
                        <th>Name</th>
                        <th>Ctime</th>
                        <th>operation+</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- 在之前, v-for 中的数据,都是直接从data 上的list 中直接渲染过来的 -->
                    <!-- 现在我们自定义一个search方法, 同时 ,把所有的关键字 通过传参的形式,传递给search方法 -->
                    <!-- 在search 方法内部通过执行 for循环  ,把所有符合  搜索关键字的数据 , 保存到一个 新数组中  -->
                    <tr v-for ="item in list" :key = 'item.id'>
                        <td>{{item.id}}</td>
                        <td v-text = 'item.name'></td>
                        <td>{{item.ctime}}</td>
                        <td>
                            <a href="" @click.prevent = "del(item.id)">删除</a>
                        </td>
                    </tr>

                </tbody>


            </table>
            <h3 v-color ="'pink'" v-fontweight="900" v-fontsize="50">{{dt | tim}}</h3>

        </div>
        <script>

           
            var vm = new Vue({
                el: '#app',
                data: {
                    id:"",
                    name:'',
                    keywords:'',
                    list:[
                        {id:1,name:'比亚迪',ctime:new Date()},
                        {id:2,name:'玛莎拉蒂',ctime:new Date()}
                ],
                dt: new Date()

                },
                methods:{
                    add(){
                        var car = {id:this.id, name: this.name, ctime:new Date()};
                        this.list.push(car);//将获取到的对象push到list中
                        this.id=this.name="";
                    },
                    del(id){//根据id来删除数据
                    //找到数组的索引值根据索引来删除数组中的数据
                    var index = this.list.findIndex(item =>{
                        if(item.id == id){
                            return true;
                        }
                    })

                    this.list.splice(index , 1)

                    },
                    search(keywords) {
                        return this,list.findIndex(item =>{
                            
                            if(item.name.includes(keywords)){
                                return item;

                            }
                        })
                    }
                  

                },
                filters:{ //定义私有过滤器  过滤器有两个  条件  [过滤器名称和处理函数]
                    tim(dtstar,pat =''){
                        //根据给定的时间字符串得到特定的时间
                        var dt = new Date(dtstar)
                        
                        var y = dt.getFullYear()
                        var m = (dt.getMonth()+1).toString().padStart(2,'0')
                        var d = dt.getDate().toString().padStart(2,'0')

                        var hh = dt.getHours().toString().padStart(2,'0')
                        var mm = dt.getMinutes().toString().padStart(2,'0')
                        var ss = dt.getSeconds().toString().padStart(2,'0')

                        return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
                    }

                }
            })
        </script>
    </body>
</html>